<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>进阶版（购物车）</title>
    <script id="jqbb" src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
    <style type="text/css">
        body {
            background-color: #fff
        }

        * {
            margin: 0;
            padding: 0;
            margin: 0 auto;
        }

        table {
            width: 50%;
            position: relative;
            margin: 50px auto;
            border: 1px solid black;
            border-collapse: collapse;
        }

        th {
            background-color: yellow;
        }

        tr {
            text-align: center;
            height: 40px;
            margin: 0 auto;
        }

        button {
            width: 19px;
            height: 19px;
        }
    </style>
</head>

<body>
    <table id="tab1" border="1">
        <thead>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="xuhao">1</td>
                <td class="tong">烧煎饼</td>
                <td>
                    <button>-</button>
                    <span class="goods-num">0</span>
                    <button>+</button>
                </td>
                <td>单价：
                    <span class="goods-psrice">2</span>
                </td>
                <td>小计：
                    <span class="goods-single-price">0</span>
                </td>
                <td>操作：
                    <input type="button" value="删除" class="sel">
                </td>
            </tr>
            <tr>
                <td class="xuhao">2</td>
                <td class="tong">水煮鱼</td>
                <td>
                    <button>-</button>
                    <span class="goods-num">0</span>
                    <button>+</button>
                </td>
                <td>单价：
                    <span class="goods-psrice">15</span>
                </td>
                <td>小计：
                    <span class="goods-single-price">0</span>
                </td>
                <td>操作：
                    <input type="button" value="删除" class="sel">
                </td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td colspan="6">商品一共
                    <span id="goods-total-num">0</span>件，共计花费
                    <span id="goods-total-price">0</span>元</td>
            </tr>
        </tbody>
    </table>
    <table id="tab2" border="1">
        <tbody>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>单价</th>
                <th>操作</th>
            </tr>
            <tr>
                <td>1</td>
                <td>炒饼</td>
                <td>单价：
                    <span>9</span>
                </td>
                <td>操作：
                    <input type="button" class="addbtn" value="添加">
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>孜然炒肉</td>
                <td>单价：
                    <span>22</span>
                </td>
                <td>操作：
                    <input type="button" class="addbtn" value="添加">
                </td>
            </tr>
        </tbody>
    </table>


    <script>

        /*
        思路分析
        创建一个Cart类，
            getGoodsnum获取商品数量
        
        */



        class Cart {
            getGoodsnum() {
                let OGoodsnum = document.getElementsByClassName("goods-num");
                let goodstotalnum = 0;
                for (let i = 0; i < OGoodsnum.length; i++) {
                    goodstotalnum += Number(OGoodsnum[i].innerHTML);
                }
                let oGoodstotalnum = document.querySelector("#goods-total-num");
                oGoodstotalnum.innerHTML = goodstotalnum;
            }
            getGoodsPrice() {
                let Ogoodssingleprice = document.getElementsByClassName("goods-single-price");
                let goodstotalprice = 0;
                for (var i = 0; i < Ogoodssingleprice.length; i++) {
                    goodstotalprice += Number(Ogoodssingleprice[i].innerHTML);
                }
                let Ogoodstotalprice = document.querySelector("#goods-total-price");
                Ogoodstotalprice.innerHTML = goodstotalprice;
            }
            getGoodsSinglePrice(num, price) {
                return num * price;
            }
            Goodadd(btn) {
                let goodsnum = btn.previousElementSibling;
                goodsnum.innerHTML = Number(goodsnum.innerHTML) + 1;
                let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild;
                let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice.innerHTML);
                goodssingleprice.innerHTML = Ogoodssinglepc;
                this.getGoodsnum();
                this.getGoodsPrice();
            }
            Goodmin(btn) {
                let goodsnum = btn.nextElementSibling;
                if (goodsnum.innerHTML > 0) {
                    goodsnum.innerHTML = Number(goodsnum.innerHTML) - 1;
                    let Ogoodsprice = btn.parentNode.nextElementSibling.firstElementChild.innerHTML;
                    let goodssingleprice = btn.parentNode.nextElementSibling.nextElementSibling.firstElementChild;
                    let Ogoodssinglepc = this.getGoodsSinglePrice(goodsnum.innerHTML, Ogoodsprice);
                    goodssingleprice.innerHTML = Ogoodssinglepc;
                    this.getGoodsnum();
                    this.getGoodsPrice();
                }
            }
            select(btn) {
                let otr = btn.parentNode.parentNode;
                otr.remove();
                this.getGoodsnum();
                this.getGoodsPrice();


            }
            xuhao(btn) {
                let oXu = document.getElementsByClassName("xu");
                for (let i = 0; i < oXu.length; i++) {
                    oXu[i].innerHTML = i + 1;
                }
            }
            eventbind() {
                let obtns = document.querySelectorAll("button");
                let that = this;
                for (let i = 0; i < obtns.length; i++) {
                    if (i % 2) {
                        obtns[i].onclick = function () {
                            that.Goodadd(this);
                        }
                    } else {
                        obtns[i].onclick = function () {
                            that.Goodmin(this);
                        }
                    }
                }
                let oselbtn = document.querySelectorAll(".sel");
                for (let i = 0; i < oselbtn.length; i++) {
                    oselbtn[i].onclick = function () {
                        that.select(this);
                        that.xuhao(this);
                    }
                }
            }
        }

        var ca = new Cart();
        ca.eventbind();

        class cartTwo {
            addmenu() {
                let oaddbtns = document.querySelectorAll(".addbtn");
                let otab1 = document.querySelector("#tab1 tbody");
                let oTong = document.getElementsByClassName("tong");
                for (let i = 0; i < oaddbtns.length; i++) {
                    oaddbtns[i].onclick = function () {
                        let add = this.parentNode.previousElementSibling.previousElementSibling;
                        let price = this.parentNode.previousElementSibling;
                        let oXu = document.getElementsByClassName("xu");
                        let flag = false;
                        let e = 0;
                        for (let i = 0; i < oTong.length; i++) {
                            if (add.innerHTML == oTong[i].innerHTML) {
                                flag = true;
                                e = i;
                            }
                        }
                        if (flag == true) {
                            ca.Goodadd(oTong[e].nextElementSibling.lastElementChild);
                        } else {
                            let str =
                                `<tr>
							<td class = "xuhao"></td>
							<td class = "tong">${add.innerHTML}</td>
							<td><button>-</button><span class="goods-num">1</span><button>+</button></td>
							<td>${price.innerHTML}</td>
							<td>小计：<span class="goods-single-price">${price.firstElementChild.innerHTML}</span></td>
							<td>操作：<input type="button" value="删除" class="sel"></td>
							</tr>`;
                            otab1.innerHTML += str;
                        }

                        ca.xuhao();
                        ca.eventbind();;
                    }
                }
            }
        }


        let caa = new cartTwo();
        caa.addmenu();
    </script>
</body>

</html>